<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>私人空间</title>
    <link rel="stylesheet" th:href="@{/static/layui/js/css/layui.css}">
    <script th:src="@{/static/layui/js/layui.js}" charset="UTF-8" type="text/javascript"></script>
    <script th:src="@{/static/vue/vue.js}" charset="UTF-8" type="text/javascript"></script>
    <script th:src="@{/static/vue/axios.min.js}" charset="UTF-8" type="text/javascript"></script>
    <script th:src="@{/static/jquery/jquery.js}" charset="UTF-8" type="text/javascript"></script>
    <style>
        .layui-bold{
            font-weight: bold;
        }
    </style>
</head>
<body>
<!--导航-->
        <ul class="layui-nav layui-bg-green"  lay-bar="disabled">
            <li class="layui-nav-item layui-nav-itemed" lay-unselect>
                <a class="layui-font-20" style="color: white;vertical-align: middle">私人空间</a>
            </li>

            <li class="layui-nav-item" >
                <ul class="layui-nav layui-bg-green">

                    <li class="layui-nav-item ">
                        <a class="layui-font-18" href="">首页</a>
                    </li>

                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="layui-font-18" href="">留言</a>
                    </li>

                    <li class="layui-nav-item ">
                        <a class="layui-font-18" href="">相册</a>
                    </li>

                    <li class="layui-nav-item ">
                        <a class="layui-font-18" href="">视频</a>
                    </li>
                </ul>

            </li>



            <!--个人信息导航-->
            <li class="layui-nav-item layui-layout-right"  style="margin-right: 50px">
                <a href="">
                    <!--个人头像,由后端动态显示-->
                    <img th:src="@{/static/img/test/IMG_1008.jpg}" class="layui-nav-img">我</a>
                    <!--简易化个人信息导航-->
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">个人中心</a></dd>
                        <dd><a href="javascript:;">退出登录</a></dd>
                    </dl>
                </a>

            </li>

        </ul>











<!--信息主体根标签-->
<div class="layui-bg-gray" style="padding: 30px;">
    <div class="layui-container layui-row layui-bg-gray" >
        <div class="layui-panel">
            <div class="layui-row layui-col-space20" style="margin-top: 10px;">

                <div class="layui-col-md4 layui-col-lg-offset4">
                    <!--xxxxx的留言板-->
                    <a class="layui-font-20" style="margin-left: 37%;color: gray">
                        留言板<a class="layui-icon">&#xe687;</a>
                    </a>
                </div>
                <div class="layui-col-md4">

                </div>

            </div>


            <div class="layui-row layui-col-space20" style="margin-right: 10%">
                <form class="layui-form layui-form-pane" action="" style="margin-left: 15%">
                    <div class="layui-form-item">
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">留言</label>
                            <div class="layui-input-block">
                                <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <button class="layui-btn" lay-submit="" lay-filter="demo2">跳转式提交</button>
                        </div>
                    </div>

                </form>

            </div>

            <div class="layui-row layui-col-space10">
                <!--留言懒加载-->
                <ul class="flow-default" id="message" style="margin-left: 12%">


                </ul>

            </div>

        </div>

    </div>









</div>


<!--自定义脚本-->
<script th:src="@{/static/personal-space-message.js}" type="text/javascript"></script>


<!--信息获取接口-->
<!--信息获取API为前缀+id号-->

<!--后端服务器用户头像获取接口前缀-->
<form th:action="@{/download/image/message/}" id="message_owner_image_download"></form>

<!--后端服务器空间头像获取接口前缀-->
<form th:action="@{/download/space/image/}" id="space_owner_image_download"></form>

<!--后端服务器留言获取接口前缀-->
<form th:action="@{/download/space/commit/}" id="space_commit_download"></form>

<!--信息上传接口-->
<!--信息上传API为前缀+id号-->

<!--留言长传接口-->
<form th:action="@{/upload/space/commit/}" id="space_commit_upload"></form>

</body>
</html>